<template>
	<view v-if="pageShow">
		<view class="mainpadding" style="padding-bottom: 10rpx;">
			<view class="flexleft">
				<image class="listleftimg hearradius margin_right2" :src="dataAll.logo_text" mode=""></image>
				<view class="flexcolumnbet" style="height: 120rpx;width: 100%;">
					<view class="sanshier hei_text bold">{{dataAll.name}}</view>
					<view class="flexleft">
						<view class="flexcolumn" style="margin-right: 100rpx;">
							<text class="sanshier hei_text bold ">{{dataAll.star}}分</text>
							<u-rate :count="5" v-model="dataAll.star" allowHalf gutter="0" readonly ></u-rate>
						</view>
						<view class="">
							<view class="smalltext hei_text margin_right">营业时间：{{dataAll.yysj}}</view>
							<view class="smalltext hei_text margin_right">浏览数：{{dataAll.view_num}}  关注：{{dataAll.gz_num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin_top flexleft">
				<view class="flexleft margin_right" @click="callphone(dataAll.tel)">
					<u-icon name="phone" color="#999" size="16"></u-icon>
					<text class="xiaohui ershil margin_left1">{{dataAll.tel}}</text>
				</view>
				<view class="flexleft" @click="openlocation">
					<u-icon name="map" color="#999" size="16"></u-icon>
					<text class="xiaohui ershil margin_left1">{{dataAll.address_detail}}</text>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="fxbtn flexcenter" @click="tzlqyhq(listid)">优惠券</view>
				<view class="fxbtn flexcenter" @click="gz_fn(listid)">{{dataAll.is_gz?"取消关注":"关注门店"}}</view>
				<button open-type="share" hover-class="none">
					<view class="fxbtn flexcenter">分享门店</view>
				</button>
			</view>
		</view>
		<view class="flexleft" style="background-color: #ccc9c9;">
			<scroll-view scroll-y="true" class="scroll-Yleft margin_top1" style="margin-right: 10rpx;">
				<!-- <view class="itemli-boxf">
					<view class="itemli-contentf">推荐推荐</view>
				</view>
				<view class="itemli-box" v-for="item in 20">
					<view class="itemli-content">推荐推荐</view>
				</view> -->
				<view :class="item.id==leftlistid?'itemli-boxf':'itemli-box'" v-for="item in leftlist" :key="item.id" @click="changeleft(item)">
					<view class="textcenter" :class="item.id==leftlistid?'itemli-contentf':'itemli-content'">{{item.name}}</view>
				</view>
				
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-Yright margin_top1">
				<view :class="index==0?'':'margin_top1'" v-for="(item,index) in rightlist" :key="item.id">
					<view class="flexbetween" style="padding: 15rpx;background-color: #f8f8f8;" >
						<view class="titletext hei_text" style="font-size: 28rpx;">{{item.name}}</view>
						<u-icon name="arrow-right" color="#999" size="12"></u-icon>
					</view>
					<view class="flexleft flex_wrap ffffff" style="padding: 15rpx;" v-if="item.goodsdata.length">
						<view class="flexcolumn itemfl margin_top" v-for="ite in item.goodsdata" :key="ite.id" @click="tzspxq(ite.id,ite.goods_attr)">
							<view class="flimg">
								<image :src="ite.image_text" mode=""></image>
							</view>
							<view class="xiaohui main_size yhxk margin_top2" style="width: 150rpx;" >{{ite.title}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<tabbarshop :current="2" :shopid="listid"  :shopInfo="dataAll"></tabbarshop>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid:"",
				dataAll:{},
				pageShow:false,
				leftlist: [], //左侧列表
				rightlist: [], //右侧内容
				leftlistid: "", //左侧列表id
			}
		},
		onLoad(options) {
			this.listid = options.id
			if(options.code){
				uni.setStorageSync("invite_code",options.code)
			}
			this.getDetail()
			this.getfl()
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "喜嘟来",
				path: "pages_shouye/shangpinfl?code=" + uni.getStorageSync("myinvite_code")+"&id="+_this.listid,
			}
		},
		methods: {
			openlocation() {
				let that = this
				uni.openLocation({
					latitude: Number(that.dataAll.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(that.dataAll.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: that.dataAll.name, //即将传到高德或腾讯地图的店铺名称
					address: that.dataAll.address_detail, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			getDetail() {
				httpRequest.request('/api/shopcl/shopDetail', 'GET', {
					id: this.listid
				}, false, false, false).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			getfl() {
				httpRequest.request('/api/shopcl/shopCategory', 'GET', {
					shop_id:this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.leftlist = res.data
						this.leftlistid = res.data[0].id
						this.getchildinit(res.data[0].id)
					}
				})
			},
			getchildinit(category_id){
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/Shopcl/shopCategoryChild', 'GET', {
					category_id,
					shop_id:this.listid
				}, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.rightlist = res.data
					}
				})
			},
			changeleft(item) {
				this.leftlistid = item.id
				if (item.id != "") {
					this.getchildinit(item.id)
				} else {
					this.rightlist = []
				}
			},
			jumpdetail(urls, id) {
				uni.navigateTo({
					url: urls + id
				})
			},
			tzspxq(id, attr) {
				uni.navigateTo({
					url: '/pages_lianmengsc/shangpxq?id=' + id + "&attr=" + attr
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uicon-star{
		font-size: 15rpx !important;
	}
.fxbtn {
		width: 150rpx;
		height: 70rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		border: 1rpx solid #FF9341;
		color: #FF9341;
		border-radius: 16rpx;
	}
</style>
<style lang="scss" scoped>
	.ss {
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 10rpx 18rpx;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
		margin-right: 30rpx;
	}

	.scroll-Yleft {
		height: calc(100vh - 500rpx);
		width: 190rpx;
		background-color: #fff;
	}

	.scroll-Yright {
		height: calc(100vh - 500rpx);
		width: calc(100vw - 200rpx);

	}

	.itemli-boxf {
		padding: 20rpx 15rpx;
		background-color: #e2e2e2;
	}

	.itemli-box {
		padding: 20rpx 15rpx;
		background-color: #fff;
	}

	.itemli-contentf {
		padding: 0 15rpx;
		text-align: center;
		box-sizing: border-box;
		border-left: 4rpx solid #e41946;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		// font-weight: 800;
		color: #333;
		// width: 160rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.itemli-content {
		padding: 0 15rpx;
		text-align: center;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		// font-weight: 800;
		color: #9B9B9B;
		// width: 160rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.itemfl {
		width: 33.33%;

	}



	.flimg {
		width: 140rpx;
		height: 140rpx;
		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.leftimg {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		flex: 2;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.goodsnote {
		height: 80rpx;
	}

	.flexstartclom {
		flex: 3;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
		margin-top: 40rpx;
	}

	.lookall {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ff9341;
	}
</style>
